import React from 'react';
import Toast from 'antd-mobile/lib/toast';
import {
  fetchReturnBinddeliveryApi,
  fetchOrderDetailApi,
  fetchValidateordersnApi
} from '../../api' ;
import LogisticsForm from './LogisticsForm';
import './index.less';

const statusData = ['','客服审核中','','拒绝退货申请，请联系客服','已提交物流信息','退货完成','','等待退款']
export default class Refund extends React.PureComponent {
  state = {
    resData:{productlist:[],sndata:[]},
  }

  logisticsData = {

  }

  fetchValidateordersn = (data) => {
    return fetchValidateordersnApi(data).then((res)=>{
      return res;
    })
  }

  hanldeClick = async () => {
    //绑定物流
    const pro = this.props.location.state;
    this.logisticsData.return_id = pro.return_id;
    fetchReturnBinddeliveryApi(this.logisticsData).then((res)=>{
      if(res.code === 1000){
        Toast.success('操作成功！')
        __self.history.push('/account/sales-service')
      }
    })
  }

  componentDidMount(){
    const { id } = this.props.match.params;
    fetchOrderDetailApi({ order_id: id}).then((res)=>{
      if(res.code === 1000){
        this.setState({resData:res.data});
      }
    });
  }

  logisticsChange(key,val){
    this.logisticsData[key] = val;
  }

  render() {
    const { resData } = this.state;
    const pro = this.props.location.state || {};
    return (
      <div className="account-block refund">
        <div className="account-block__title">
          售后服务
        </div>
        <div className="account-block__content ">
          <div className="order-number">
            <span>退货商品   订单号：{resData.order_no}</span>
          </div>
          <div className="order__product">
            <div className="order__img">
              <img src={pro.image} alt="" />
            </div>
            <div className="order__title">
              <p>
                <span className="order__brand">佳能</span>
                  （Canon）{pro.title}
              </p>
              <div className="order__num">{pro.quantity}件</div>
            </div>
          </div>
          {
            (pro.return_status_id == 2) ?
              <LogisticsForm
                logisticsChange={(key,val)=>this.logisticsChange(key,val)}
              /> :<div className='status-text'>{statusData[pro.return_status_id] || pro.return_status_name}……</div>
          }
          {
            pro.return_status_id == 2 ?
              <div className="button-container">
                <span className="button" onClick={()=>this.hanldeClick()}>提交</span>
              </div> : null
          }

        </div>
      </div>
    )
  }
}